<template>
  <el-dialog
    v-model="visible"
    :show-close="false"
    style="height: 890px"
    align-center="true"
    width="898"
  >
    <template #header>
      <span style="font-size: 18px">选择</span>
    </template>
    <div class="main">
      <div class="main-left">
        <div class="main-top">
          <el-input placeholder="请输入关键字" :suffix-icon="Search" />
        </div>
        <div class="main-body-wrap">
          <div class="main-body">
            <div class="main-tabs">
              <el-button
                style="padding: 8px; width: calc(50% - 8px)"
                class="el-button is-text is-has-bg text-one-line el-button--selected"
              >
                常用
              </el-button>
              <el-button
                style="padding: 8px; width: calc(50% - 8px)"
                class="el-button is-text is-has-bg text-one-line"
              >
                员工
              </el-button>
            </div>
            <div class="use-view">
              <el-checkbox-group v-model="checkList">
                <div class="letter-block">
                  <div class="header">
                    <span class="label">员工</span>
                    <span class="line"></span>
                  </div>
                </div>
                <div class="children">
                  <template v-for="item in ownerUser" :key="item.userNo">
                    <div class="check-cell">
                      <el-checkbox
                        :label="item.userNo"
                        v-model="checkList"
                        class="hidden-label"
                      />
                      <div class="check-cell-content">
                        <span class="xr-avatar">
                          <el-avatar :size="30"> in </el-avatar>
                        </span>
                        <div class="content">
                          <div>
                            <div class="realname text-one-line">
                              {{ item.username }}
                            </div>
                            <div class="dept-name text-one-line">
                              {{ item.deptName }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="main-right">
        <div class="main-top">
          已选择 {{ selectedUser ? 1 : 0 }} 人
          <el-button
            style="float: right; margin-top: 10px"
            type="primary"
            class="is-link clear-btn"
            @click="clearSelection"
          >
            <span>清空</span>
          </el-button>
        </div>
        <div class="main-body is-right">
          <div class="main-select">
            <el-tag
              v-if="selectedUser"
              :key="selectedUser.userNo"
              closable
              @close="selectedUser = null"
            >
              {{ selectedUser.username }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="onSubmit">确定</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { getAdminUserList } from '@/api/adminUser'
import { Search } from '@element-plus/icons-vue'
const checkList = ref([])
const selectedUser = ref(null)
const ownerUser = ref([])

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  onSubmit: {
    type: Function,
    required: false,
  },
  onCancel: {
    type: Function,
    required: true,
  },
})

const visible = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue
  },
)
watch(visible, (newValue) => {
  if (!newValue) {
    props.onCancel()
  }
})

function handleData() {
  getAdminUserList().then((result) => {
    console.log(result)
    ownerUser.value = result.data
  })
}
handleData()

function clearSelection() {
  checkList.value = []
  selectedUser.value = null
}

defineExpose({ selectedUser })

watch(
  checkList,
  (newVal) => {
    if (newVal.length > 1) {
      checkList.value = [newVal[newVal.length - 1]]
    }
    selectedUser.value = ownerUser.value.find(
      (user) => user.userNo === checkList.value[0],
    )
  },
  { deep: true },
)
</script>
<style scoped>
.main {
  border: 1px solid #dfe1e6;
  display: flex;
  height: 768px;
}

.main-left {
  border-right: 1px solid #dfe1e6;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.main-right {
  flex: 1;
}

.main-body:not(.is-right) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-tabs {
  flex-shrink: 0;
}

.main-select {
  padding: 8px 16px;
}

.el-button.is-text:not(.is-disabled).is-has-bg {
  background-color: #ebecf0;
}

.el-button--selected:not(.is-disabled),
.el-button--selected[aria-expanded='true']:not(.is-disabled) {
  background-color: #344563 !important;
  border-color: #344563 !important;
  color: #fff !important;
}

.main-body-wrap {
  height: calc(100% - 60px);
  padding: 8px 16px;
  position: relative;
}

.main-top {
  border-bottom: 1px solid #dfe1e6;
  line-height: 50px;
  padding: 0 16px;
  position: relative;
}

.use-view {
  height: 100%;
  margin-top: 8px;
  overflow-y: scroll;
  position: relative;
  font-size: 14px;
  height: 100%;
  padding-right: 30px;
}

.letter-block .header {
  height: 21px;
  line-height: 21px;
  position: relative;
}

.letter-block .header > .label {
  background-color: #fff;
  color: #a5adba;
  left: 0;
  padding-right: 8px;
  position: absolute;
  z-index: 2;
}

.letter-block .header > .line {
  background-color: #dfe1e6;
  height: 0.5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 1;
}

.check-cell {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  line-height: normal;
}

.check-cell .check-cell-content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-shrink: 0;
  margin-left: 8px;
}

.check-cell .xr-avatar {
  flex-shrink: 0;
  margin-right: 8px;
  display: inline-block;
  position: relative;
}

.check-cell .content {
  align-items: center;
  display: flex;
  flex: 1;
  width: 0;
}

.check-cell .content .realname {
  color: #172b4d;
  font-size: 14px;
}

.check-cell .content .dept-name {
  color: #6b778c;
  font-size: 12px;
}

.text-one-line {
  white-space: nowrap;
}

.main-top .clear-btn {
  float: right;
  margin-top: 8px;
}

.hidden-label :deep(.el-checkbox__label) {
  display: none;
}
</style>
